<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- (c) 2013 J D Eisenberg -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>The set element in animation</title>
  <link rel="stylesheet" type="text/css" href="../svg_style.css">
  <script type="text/javascript" src="../svg_utils.js"></script>
</head>

<body onload="init();">

<div id="svgInput">
<div class="editable"><pre id="svgSource" contenteditable="true"></pre></div>
<div id="svgOriginal">&lt;svg width="150" height="100"&gt;
&lt;circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;"&gt;
  &lt;animate id="c1" attributeName="r" attributeType="XML"
    begin="0s" dur="4s" from="30" to="0" fill="freeze"/&gt;
&lt;/circle&gt;

&lt;text text-anchor="middle" x="60" y="60" style="visibility: hidden;"&gt;
  <span class="highlight">&lt;set attributeName="visibility" attributeType="CSS"
    to="visible" begin="4.5s" dur="1s" fill="freeze"/&gt;</span>
  All gone!
&lt;/text&gt;
&lt;/svg&gt;
  </div>
<div id="svgError"></div>
<div>
  <input type="button" value="Refresh" onclick="refresh(); reanimate();"/>
  <input type="button" value="Reset" onclick="reset(); reanimate();"/>
  <input type="checkbox" id="svgShowError" /> <!--Show SVG Errors-->
</div>
</div> <!-- svgInput-->

<div id="svgOutput">
  <svg width="350" height="120" viewBox="0 0 350 120" id="svgSvg">
    <g id="svgMarkup"></g>
  </svg>
</div>

</body>
</html>

